<template>
    <!-- 此版本活动行程暂时抛弃 -->
    <div class="travel">
        <page-title title=""></page-title>
        <timeline>
            <timeline-item v-for="(item, index) in travel" :key="index" :isCurrent="item.recent" :class="[ item.timeStatus ? 'recent':'past' ]">
                <h4 class="title">{{item.title}}</h4>
                <p class="time">{{item.startTime}}</p>
            </timeline-item>
        </timeline>
    </div>
</template>

<script>
import { Timeline, TimelineItem } from 'vux'
export default {
    data() {
        return {
            nowTime: +new Date(),
            travel: []

        }
    },
    components: {
        Timeline,
        TimelineItem
    },
    mounted() {
        this.travel = [
            { startTime: '2017/10/27 08:00:00', title: '活动行程安排一' },
            { startTime: '2017/11/27 10:00:00', title: '活动行程安排二' },
            { startTime: '2017/12/27 14:00:00', title: '活动行程安排三' },
            { startTime: '2017/12/28 09:33:00', title: '活动行程安排四' },
            { startTime: '2017/12/28 10:30:00', title: '活动行程安排Ⅴ' },
            { startTime: '2017/12/28 11:00:00', title: '活动行程安排Ⅵ' },
            { startTime: '2017/12/28 12:00:00', title: '活动行程安排⑦' },
            { startTime: '2017/12/28 13:00:00', title: '活动行程安排Ⅷ' },
            { startTime: '2017/12/28 14:00:00', title: '活动行程安排Ⅸ' },
        ]
        // 根据当前时间,显示活动进程
        for (let i = 0; i < this.travel.length; i++) {
            let element = this.travel[i];
            let elementTime = +new Date(element.startTime)
            this.travel[i].recent = false
            if (elementTime >= this.nowTime) {
                if (i == 0) {
                    // 活动尚未开始
                    this.travel[i].timeStatus = true
                }
                // 根据时间，高亮显示当前活动行程，因上一步判断条件是开始时间，实际情况是此活动正在进行中，所以要包含符合条件的上一条数据
                else if (i > 0) {
                    let prevTime = +new Date(this.travel[i - 1].startTime)
                    this.travel[i].timeStatus = true
                    this.travel[i - 1].timeStatus = true
                    if (i > 1) {
                        if (this.travel[i - 1].timeStatus) {
                            console.log(!this.travel[i - 2].timeStatus)
                            if (!this.travel[i - 2].timeStatus) {
                                this.travel[i - 1].recent = true
                            }
                        }
                    }
                    if (i == 1) {
                        this.travel[0].recent = true
                    }
                }
            }


        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
